  var globalProductApparelId = '28361230';
  var globalProductId = '';
  var globalProductPrice = 0;
  var globalProductQty = 0;
  var globalProductOptionStyle = '';
  var globalProductOptionColour = '';  
  var globalProductOptionGender = '';
  var globalProductOptionShipment = '';
  var globalCartName = 'cartItem';

  function saveItem(pName,pValue)
  {   
   Storage[name] = pValue;
  }
 //
 //
 //
  function retrieveItem(pName)
  {
	return Storage[name];
  }
 //
 //
 // 
  function retrieveCart()
  {
    var oCart = Storage[globalCartName];	
	
	if(!oCart)
	{
	   oCart = [];
	   saveCart(oCart);
	}
	else
	{		
	}
	return oCart;
  }
 //
 //
 // 
 function saveCart(pValue)
 {   
   Storage[globalCartName] = pValue;
 }
 //
 //
 //
 function loadCategory(pParentId,pChildId)
 {
	var parentId = $(document.getElementById(pParentId));
	var parentVal = parentId.val();
	var childId = $(document.getElementById(pChildId));
	
	childId.empty();
	childId.append(new Option("Select An Option",""));
	jQuery.getJSON
	( 
		"https://app.ecwid.com/api/v1/2380026/categories?parent=" + parentVal + "&callback=?", 
		function( data ) 
		{
			for(var i=0; i<data.length;i++)
			{
				childId.append(new Option(data[i].name,data[i].id));
			}
		}
	);
	
	loadProductList(parentVal);
	
 }
 //
 //
 // 
 function loadMainCategory(pCategoryId)
 {	
	$('#inputCategory01').empty();
	
	$("#inputCategory01").append(new Option("Select An Option",""));
	jQuery.getJSON
	( 
		"https://app.ecwid.com/api/v1/2380026/categories?parent=" + pCategoryId + "&callback=?", 
		function( data ) 
		{
			for(var i=0; i<data.length;i++)
			{		
				$('#inputCategory01').append(new Option(data[i].name,data[i].id));
			}
		}
	);	
 } 
 //
 //
 //
 function loadProductList(pCategoryId)
 { 
 
		var subCat = $("#subCategory").val();
		
		
		var url = "https://app.ecwid.com/api/v1/2380026/products?category=" + pCategoryId + "&hidden_products=true&secure_auth_key=ELXiWqZcGaTr" + "&callback=?";
		 
		$('#divContentProduct').empty();		 
		
		jQuery.getJSON
		( 
			url, 
			function( data ) 
			{			
				showProductList(data);
			}
		);		
 }
 //
 //
 //
 function loadProductListOld()
 { 
 
		var subCat = $("#subCategory").val();
		
		
		var url = "https://app.ecwid.com/api/v1/2380026/products?category=" + subCat + "&hidden_products=true&secure_auth_key=ELXiWqZcGaTr" + "&callback=?";
		 
		$('#divContentProduct').empty();		 
		
		jQuery.getJSON
		( 
			url, 
			function( data ) 
			{			
				showProductList(data);
			}
		);		
 }
 //
 //
 //
 function showProductList(pData)
 { 			
	for(var i=0; i<pData.length; i++)
	{		
		var sContent = "";
		var itemPrice = 0;
		var itemId = pData[i].id;
		
		sContent = sContent + '<div id="divItem' + pData[i].id + '" style="float:left; margin:10px 10px 10px 10px; width:180px; height:100px">';
		sContent = sContent + ' <span>' + pData[i].name + '</span>';
		sContent = sContent + ' <div><img src="' + pData[i].thumbnailUrl + '" width="100px" height="80px" onClick="showProductDetail(\'' + pData[i].id + '\')"></div>';
		sContent = sContent + ' <span>' + pData[i].price + '</span>';
		sContent = sContent + '</div>';	
		
		$("#divContentProduct").append(sContent);			
	}
 }
 //
 //
 //
 function showProductDetail(pProductId, pCartItem, pCartIndex)
 {
    var url = "https://app.ecwid.com/api/v1/2380026/product?id=" + pProductId + "&hidden_products=false&secure_auth_key=ELXiWqZcGaTr&callback=?";
			  
	jQuery.getJSON
	( 
		url, 
		function( data ) 
		{				
			$("#selectedItemId").val(data.id);
			
			globalProductId = data.id;
			globalProductPrice = data.price;
			$("#divProductSKUValue").html(data.sku);
			$(document.getElementById("INPUT.PRODUCT.SKU")).val(data.sku);
			$(document.getElementById("INPUT.PRODUCT.ID")).val(data.id);
			$(document.getElementById("INPUT.PRODUCT.NAME")).val(data.name);
			$("#divProductPriceValue").html(data.price);
			
			$("#itemImgBig").empty();
			$("#itemImgFront").empty();
			$("#itemImgBack").empty();
			$("#itemImgSide").empty();
			
			if(data.galleryImages[0] != null)
			{
			  var tmp = 'url(' + data.galleryImages[0].url + ')';			  
			  $("#itemImgBig").html('<img width="200px" src="' + data.galleryImages[0].url + '"/>');
			  $("#itemImgFront").css("background-image",tmp);			  
			  
			}
			
			if(data.galleryImages[1] != null)
			{
				var tmp0 = "http://www.babyconcept.com.sg/images/mainkid.jpg";
				tmp0 = data.galleryImages[1].url;
				var tmp1 = "url(" + tmp0 + ")";
				
				$("#itemImgBack").css("background-image",tmp1);
			}
			
			if(data.galleryImages[2] != null)
			{			 
				//$("#itemImgSide").html('<img width="100px" src="' + data.galleryImages[2].url + '" onClick="updateBigImage(\"' + data.galleryImages[0].url + '\""/>');
				var img = $('<img id="imgProductFront"/>');
				img.attr("height","100px");
				img.attr("width","100px");
				img.attr("src",data.galleryImages[1].url);
				img.appendTo('#itemImgSide');			    				
			}
			
			for(var j=0; j<data.options.length; j++)
			{
				var sName = data.options[j].name;
				sName = sName.toUpperCase();
				
				switch(sName)
				{
					case 'COLOUR':
								  populateProductOption(data.options[j],"divProductOptionColourValue","inputProductOptionColour");
								  break;
								  
					case 'STYLE':
								  populateProductOption(data.options[j],"divProductOptionStyleValue","inputProductOptionStyle");
								  break;
					
					case 'GENDER':
								  populateProductOption(data.options[j],"divProductOptionGenderValue","inputProductOptionGender");
								  break;
								  
					case 'SIZE':
								  populateProductOption(data.options[j],"divProductOptionSizeValue","inputProductOptionSize");
								  break;

					case 'DELIVERY':
								  populateProductOption(data.options[j],"divProductOptionShipmentValue","inputProductOptionShipment");
								  break;
						
				}
			}
			$("#productDetail").dialog( "option", "title", "Select Style >>> " + data.sku + ":" + data.name + " From $" + data.price)		
			
			if(pCartItem)
			{
			   updateProductOption('STYLE.CHOICE',pCartItem.options.styleChoice);
			   updateProductOption('GENDER.CHOICE',pCartItem.options.genderChoice);
			   updateProductOption('COLOUR.CHOICE',pCartItem.options.colourChoice);
			   updateProductOption('SIZE.CHOICE',pCartItem.options.sizeChoice);
			   updateProductOption('DELIVERY.CHOICE',pCartItem.options.deliveryChoice);
			   $(document.getElementById("INPUT.PRODUCT.IDX")).val(pCartIndex);
			}
		}
	);   	
	$( "#productDetail").dialog( "open" );
 }
 //
 //
 // 
 function populateProductOption(pOption, pTarget, pElement)
 {
   var sContent = '';
   var tmp = '';
   
   for(var i=0; i<pOption.choices.length; i++)
   {
	  tmp = "divProduct.Option." + pOption.name + "." + pOption.choices[i].text;
	  tmp = tmp.toUpperCase();
      sContent = sContent + 
				'<div id="' + tmp + '" ' +
				      'style="font-size:12; border:1px dotted;"' +
					  'onClick="updateProductOption(\'' + pOption.name + '.Choice\',\'' + pOption.choices[i].text + '\')" >' + 
				  '-> ' + pOption.choices[i].text + 
				'</div>';
   }     
   var div = $(document.getElementById(pTarget));
   div.html(sContent);
   
 }
 //
 //
 //
 function updateProductOption(pOptionName,pOptionValue)
 {
	// Get Current Option Value
	var tmp = "input.Product.Option." + pOptionName;		
	tmp = tmp.toUpperCase();
	var inputId = $(document.getElementById(tmp));
	var oldValue = inputId.val();

	
	var tmp = "divProduct.Option." + pOptionName + "." + oldValue;	
	tmp = tmp.toUpperCase();
	// Normalise Current Option Value css
	var id = $(document.getElementById(tmp));	
	$(id).css("border", "1px dashed");
	$(id).css("background", "none");
	
	tmp = "divProduct.Option." + pOptionName + "." + pOptionValue;
	tmp = tmp.toUpperCase();
	
	id = $(document.getElementById(tmp));	
	id.css("border","1px solid");
	id.css("background","grey");
	//id.empty();
	
	inputId.val(pOptionValue);
	tmp = inputId.val();
 }
 //
 //
 //
 function updateBigImage(pUrl)
 {
   $("#itemImgBig").attr("src",pUrl);   
 }
 //
 //
 //
 function addCartItem(pProduct)
 {
	var aCartItem = retrieveCart();		 		
	aCartItem.push(pProduct);
	saveCart(aCartItem);
	showCart();		
 }
 //
 //
 //
 function removeCartItem(pIndex)
 {
	var aCartItem = retrieveCart();		 		
	aCartItem.splice(pIndex,1);
	saveCart(aCartItem);
	showCart();		
 }
 //
 //
 //
 function editCartItem(pIndex)
 {
	var aCartItem = retrieveCart();
	var oProduct = aCartItem[pIndex];	
	showProductDetail(oProduct.options.productId, oProduct,pIndex);	
 }
 //
 //
 //
 function showCart()
 {
	var aItems = retrieveCart();
	var idx = 0;
	
	$("#tableCartItemBody").empty();
	
	for(idx=0; idx<aItems.length; idx++)
	{	
	    var iSequence = idx + 1;
		var sContent = 	'' +
						'<tr>' +
						' <td>' + iSequence + '</td>' +
						' <td>' + 'Apparel' + '</td>' + 
						' <td>' + aItems[idx].options.productId.toUpperCase() + '<br>' + aItems[idx].options.sku.toUpperCase() + '</td>' +						
						' <td>' + aItems[idx].options.genderChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.colourChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.sizeChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.deliveryChoice.toUpperCase() + '</td>' +
						' <td>' + '' + '</td>' +
						' <td>' + aItems[idx].quantity + '</td>' +
						' <td>' + '' + '</td>' +
						'</tr>';
						
			$("#tableCartItemBody").append(sContent);
			
			sContent = '<tr>' +
			           ' <td colspan="10" align="right">' + 
					   '  <input type="button" value="Edit" onClick="editCartItem(' + idx + ')">' + 
					   '  &nbsp;&nbsp;&nbsp;' +
					   '  <input type="button" value="Remove" onClick="removeCartItem(' + idx + ')">' +
					   '  <br><br>' +
					   ' </td>' +
					   '</tr>';
			$("#tableCartItemBody").append(sContent);
			
			
	}	
 }
 //
 //
 //    
 /*
 function loadProductList()
 { 
 
		var subCat = $("#subCategory").val();
		
		
		var url = "https://app.ecwid.com/api/v1/2380026/products?category=" + subCat + "&hidden_products=true&secure_auth_key=ELXiWqZcGaTr" + "&callback=?";
		 
		$('#divContentProduct').empty();		 
		
		jQuery.getJSON
		( 
			url, 
			function( data ) 
			{			
				showProductList(data);
			}
		);		
 }
 //
 //
 //
 function showProductList(pData)
 { 			
	for(var i=0; i<pData.length; i++)
	{		
		var sContent = "";
		var itemPrice = 0;
		var itemId = pData[i].id;
		
		sContent = sContent + '<div id="divItem' + pData[i].id + '" style="float:left; margin:10px 10px 10px 10px; width:180px; height:100px">';
		sContent = sContent + ' <span>' + pData[i].name + '</span>';
		sContent = sContent + ' <div><img src="' + pData[i].thumbnailUrl + '" width="100px" height="80px" onClick="showProductDetail(\'' + pData[i].id + '\')"></div>';
		sContent = sContent + ' <span>' + pData[i].price + '</span>';
		sContent = sContent + '</div>';	
		
		$("#divContentProduct").append(sContent);			
	}
 }
 //
 //
 //
 function showProductDetail(pProductId, pCartItem, pCartIndex)
 {
    var url = "https://app.ecwid.com/api/v1/2380026/product?id=" + pProductId + "&hidden_products=false&secure_auth_key=ELXiWqZcGaTr&callback=?";
			  
	jQuery.getJSON
	( 
		url, 
		function( data ) 
		{				
			$("#selectedItemId").val(data.id);
			
			globalProductId = data.id;
			globalProductPrice = data.price;
			$("#divProductSKUValue").html(data.sku);
			$(document.getElementById("INPUT.PRODUCT.SKU")).val(data.sku);
			$(document.getElementById("INPUT.PRODUCT.ID")).val(data.id);
			$(document.getElementById("INPUT.PRODUCT.NAME")).val(data.name);
			$("#divProductPriceValue").html(data.price);
			
			$("#itemImgBig").empty();
			$("#itemImgFront").empty();
			$("#itemImgBack").empty();
			$("#itemImgSide").empty();
			
			if(data.galleryImages[0] != null)
			{
			  var url = "url(" + data.galleryImages[0] + ")";
			  $("#itemImgFront").css("background-image",url);			  
			  
			}
			
			if(data.galleryImages[1] != null)
			{
				var url = "url(" + data.galleryImages[1] + ")";
				$("#itemImgBack").css("background-image",url);
			}
			
			if(data.galleryImages[2] != null)
			{			 
				//$("#itemImgSide").html('<img width="100px" src="' + data.galleryImages[2].url + '" onClick="updateBigImage(\"' + data.galleryImages[0].url + '\""/>');
				var url = "url(" + data.galleryImages[2] + ")";
				$("#itemImgSide").css("background-image",url);
				
			}
			
			for(var j=0; j<data.options.length; j++)
			{
				var sName = data.options[j].name;
				sName = sName.toUpperCase();
				
				switch(sName)
				{
					case 'COLOUR':
								  populateProductOption(data.options[j],"divProductOptionColourValue","inputProductOptionColour");
								  break;
								  
					case 'STYLE':
								  populateProductOption(data.options[j],"divProductOptionStyleValue","inputProductOptionStyle");
								  break;
					
					case 'GENDER':
								  populateProductOption(data.options[j],"divProductOptionGenderValue","inputProductOptionGender");
								  break;
								  
					case 'SIZE':
								  populateProductOption(data.options[j],"divProductOptionSizeValue","inputProductOptionSize");
								  break;

					case 'DELIVERY':
								  populateProductOption(data.options[j],"divProductOptionShipmentValue","inputProductOptionShipment");
								  break;
						
				}
			}
			$("#productDetail").dialog( "option", "title", "Select Style >>> " + data.sku + ":" + data.name + " From $" + data.price)		
			
			if(pCartItem)
			{
			   updateProductOption('STYLE.CHOICE',pCartItem.options.styleChoice);
			   updateProductOption('GENDER.CHOICE',pCartItem.options.genderChoice);
			   updateProductOption('COLOUR.CHOICE',pCartItem.options.colourChoice);
			   updateProductOption('SIZE.CHOICE',pCartItem.options.sizeChoice);
			   updateProductOption('DELIVERY.CHOICE',pCartItem.options.deliveryChoice);
			   $(document.getElementById("INPUT.PRODUCT.IDX")).val(pCartIndex);
			}
		}
	);   	
	$( "#productDetail").dialog( "open" );
 }
 //
 //
 // 
 function populateProductOption(pOption, pTarget, pElement)
 {
   var sContent = '';
   var tmp = '';
   
   for(var i=0; i<pOption.choices.length; i++)
   {
	  tmp = "divProduct.Option." + pOption.name + "." + pOption.choices[i].text;
	  tmp = tmp.toUpperCase();
      sContent = sContent + 
				'<div id="' + tmp + '" ' +
				      'style="font-size:12; border:1px dashed"' +
					  'onClick="updateProductOption(\'' + pOption.name + '.Choice\',\'' + pOption.choices[i].text + '\')" >' + 
				  pOption.choices[i].text + 
				'</div>';
   }     
   var div = $(document.getElementById(pTarget));
   div.html(sContent);
   
 }
 //
 //
 //
 function updateProductOption(pOptionName,pOptionValue)
 {
	// Get Current Option Value
	//  tmp = "divProduct.Option." + pOption.name + "." + pOption.choices[i].text;
	var tmp = "input.Product.Option." + pOptionName;		
	tmp = tmp.toUpperCase();
	var inputId = $(document.getElementById(tmp));
	var oldValue = inputId.val();

	
	var tmp = "divProduct.Option." + pOptionName + "." + oldValue;	
	tmp = tmp.toUpperCase();
	// Normalise Current Option Value css
	var id = $(document.getElementById(tmp));	
	$(id).css("border", "1px dashed");
	$(id).css("background", "none");
	
	tmp = "divProduct.Option." + pOptionName + "." + pOptionValue;
	tmp = tmp.toUpperCase();
	
	id = $(document.getElementById(tmp));	
	id.css("border","1px solid");
	id.css("background","grey");
	//id.empty();
	
	inputId.val(pOptionValue);
	tmp = inputId.val();
 }
 //
 //
 //
 function updateBigImage(pUrl)
 {
   var url = "url(" + pUrl + ")";
   $("#itemImgBig").css("background-image",url);   
 }
 //
 //
 //
 function addCartItem(pProduct)
 {
	var aCartItem = retrieveCart();		 		
	aCartItem.push(pProduct);
	saveCart(aCartItem);
	showCart();		
 }
 //
 //
 //
 function removeCartItem(pIndex)
 {
	var aCartItem = retrieveCart();		 		
	aCartItem.splice(pIndex,1);
	saveCart(aCartItem);
	showCart();		
 }
 //
 //
 //
 function editCartItem(pIndex)
 {
	var aCartItem = retrieveCart();
	var oProduct = aCartItem[pIndex];	
	showProductDetail(oProduct.options.productId, oProduct,pIndex);	
 }
 //
 //
 //
 function showCart()
 {
	var aItems = retrieveCart();
	var idx = 0;
	
	$("#tableCartItemBody").empty();
	
	for(idx=0; idx<aItems.length; idx++)
	{	
	    var iSequence = idx + 1;
		var sContent = 	'' +
						'<tr>' +
						' <td>' + iSequence + '</td>' +
						' <td>' + 'Apparel' + '</td>' + 
						' <td>' + aItems[idx].options.productId.toUpperCase() + '<br>' + aItems[idx].options.sku.toUpperCase() + '</td>' +						
						' <td>' + aItems[idx].options.genderChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.colourChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.sizeChoice.toUpperCase() + '</td>' +
						' <td>' + aItems[idx].options.deliveryChoice.toUpperCase() + '</td>' +
						' <td>' + '' + '</td>' +
						' <td>' + aItems[idx].quantity + '</td>' +
						' <td>' + '' + '</td>' +
						'</tr>';
						
			$("#tableCartItemBody").append(sContent);
			
			sContent = '<tr>' +
			           ' <td colspan="10" align="right">' + 
					   '  <input type="button" value="Edit" onClick="editCartItem(' + idx + ')">' + 
					   '  &nbsp;&nbsp;&nbsp;' +
					   '  <input type="button" value="Remove" onClick="removeCartItem(' + idx + ')">' +
					   '  <br><br>' +
					   ' </td>' +
					   '</tr>';
			$("#tableCartItemBody").append(sContent);
			
			
	}	
 }
 */
 //
 //
 // 
 $(document).ready
 (
	function()
	{
	    var rootCategoryId = "6130010";
		loadMainCategory(rootCategoryId);
		showCart();		

		Ecwid.OnPageLoad.add
		(
			function(page) 
			{										
				$("#divImageCheckout").css("display","none");									
			}
		);
								 
		Ecwid.OnPageLoaded.add
		(
			function(page) 
			{										
				if(page.type == 'CART')
				{									  											
					$("#divImageCheckout").css("display","block");										
				}										
			}
		);
		
		
		$( "#productDetail" ).dialog({
				title: "Selected Item <name>",
				resizable: false,
				autoOpen: false,
			  width:'auto',
			  height:'auto',
			  modal: true,
			  buttons: 
			  { 
				"Add To Cart": function() 
				{	
				   sError = '';
				   
				   var id;
				   
				   id = $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE"));
				   
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE")).val() == "")
				  {
					sError = sError + 'Style Must Be Selected <br>';
				  }
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.CHOICE")).val() == "")
				  {
					sError = sError + 'Gender Must Be Selected <br>';
				  }
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.CHOICE")).val() == "")
				  {
					sError = sError + 'Colour Must Be Selected <br>';
				  } 
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.CHOICE")).val() == "")
				  {
					sError = sError + 'Size Must Be Selected <br>';
				  } 
				  
				  if($(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.CHOICE")).val() == "")
				  {
					sError = sError + 'Delivery Must Be Selected <br>';
				  } 
				  if(sError != "")
				  {
					alert(sError);
					return;
				  }
					
				  var product =
				  {
					id: globalProductApparelId,
					price: globalProductPrice,
					quantity: $(document.getElementById("INPUT.PRODUCT.QTY")).val(),
					options:
					{	
						productId: $(document.getElementById("INPUT.PRODUCT.ID")).val(),		    
						name: $(document.getElementById("INPUT.PRODUCT.NAME")).val(),
						sku: $(document.getElementById("INPUT.PRODUCT.SKU")).val(),								
						styleChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.CHOICE")).val(),
						stylePrice: $(document.getElementById("INPUT.PRODUCT.OPTION.STYLE.PRICE")).val(),
						genderChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.CHOICE")).val(),
						genderPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.GENDER.PRICE")).val(),
						colourChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.CHOICE")).val(),
						colourPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.COLOUR.PRICE")).val(),
						sizeChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.CHOICE")).val(),
						sizePrice: $(document.getElementById("INPUT.PRODUCT.OPTION.SIZE.PRICE")).val(),
						deliveryChoice: $(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.CHOICE")).val(),
						deliveryPrice: $(document.getElementById("INPUT.PRODUCT.OPTION.DELIVERY.CHOICE")).val()
					}
				   };   
				  
					var cartIndex = $(document.getElementById("INPUT.PRODUCT.INDEX")).val();
					if(cartIndex != "")
					{
					   removeCartItem(cartIndex);
					}
					addCartItem(product);
					Ecwid.Cart.addProduct(product);
				  
				  $( this ).dialog( "close" );
				},   
				Cancel: function() 
				{
				  $( this ).dialog( "close" );
				}
			  }
			});		
			
	}
  );
					
